<template>
  <span >
    <el-form-item prop="brand" label="品牌">
      <r-select
        v-model="search.brand"
        :clearable="true"
        class="search-input"
        selectid="BRAND_ID"
        selectname="BRAND_NAME"
        url="/vehicleProduct/dealerBrandsQueryAll"
        model="DMSCLOUD_BASEDATA"
      />
    </el-form-item>
    <el-form-item prop="series" label="机种">
      <r-select
        v-model="search.series"
        :url="seriesurl"
        :clearable="true"
        :disabled="seriesdisabled"
        class="search-input"
        selectid="SERIES_ID"
        selectname="SERIES_NAME"
        model="DMSCLOUD_BASEDATA"
      />
    </el-form-item>
    <el-form-item prop="model" label="机型">
      <r-select
        v-model="search.model"
        :url="modelurl"
        :clearable="true"
        :disabled="modeldisabled"
        class="search-input"
        selectid="MODEL_ID"
        selectname="MODEL_NAME"
        model="DMSCLOUD_BASEDATA"
      />
    </el-form-item>
  </span>
</template>

<script>

import filtercode from '@/components/Checkbox/filtercode'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
export default {
  name: 'BsmDropDown',
  components: {
    BaseTable,
    rSelect,
    filtercode

  },
  mixins: [formMixins],
  props: {
    search: Object
  },
  data() {
    return {
      seriesdisabled: true,
      modeldisabled: true
    }
  },

  computed: {
    seriesurl: function() {
      this.search.series = ''
      this.search.model = ''
      if (this.search.brand === '') {
        this.seriesdisabled = true
        this.modeldisabled = true
      } else {
        (
          this.seriesdisabled = false
        )
      }
      if (this.search.brand !== '') {
        return '/vehicleProduct/brandsdict/' + this.search.brand + '/seriessdict'
      } else {
        return ''
      }
    },
    modelurl: function() {
      this.search.model = ''
      if (this.search.series === '') {
        this.modeldisabled = true
      } else {
        (
          this.modeldisabled = false
        )
      }
      if (this.search.brand !== '' && this.search.series !== '') {
        return '/vehicleProduct/brandsdict/' + this.search.brand + '/seriessdict/' + this.search.series + '/modelsdict'
      } else {
        return ''
      }
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style scoped>

.magnifier {
  float: right;
  position: absolute;
  right: 50px;
  top: 23px;
  cursor: pointer;
}
</style>
